<template>
  <div class="detectarea">
    <div class="areatitle left">
      <div class="textpart">
        <img :src="titlepng"/>
        <h4>静安区摄像头1</h4>
      </div>
    </div>
    <div class="areatitle right">
      <div class="textpart">
        <img :src="titlepng"/>
        <h4>检索结果</h4>
      </div>
    </div>
    <div class="detectbor">
      <!--<h1>人脸对比</h1>-->
      <div class="remote-reco">
        <div class="face-reco">
          <p class="list-time">{{date}}</p>
          <el-scrollbar v-if="!noData">
            <ul>
              <li v-for="(item, index) in facelist" v-bind:key="item[0].uploadTime">
                <div class="datatime">{{item[0].uploadTime | formatTime}}</div>
                <div class="dataitem"
                     :class="{nomatch: index==0 && index2 == 2,active: rowIndex == index && itemIndex == index2}"
                     v-for="(item2, index2) in item" v-bind:key="item2.id" @click="forMore({index,index2})">
                  <img :src="item2.uploadImgName ? item2.uploadImgName : nonepng" height="100px"/>
                  <p>{{item2.faceLibrary ? item2.faceLibrary.manName : '无记录'}}</p>
                </div>
              </li>
            </ul>
          </el-scrollbar>
          <p class="noData" v-if="noData">
            今日暂无人脸验证信息
          </p>
        </div>
        <div class="face-input">
          <div class="hidemodal">
            <div class="photoinput">
              <div class="photoarea">
                <div class="existp">
                  <img :src="uploadPic ? uploadPic : nonepng"/>
                </div>
                <div class="detectp" v-if="detected && !noData">
                  <img :src="comparePic ? comparePic : nonepng"/>
                </div>
              </div>
              <div class="compresult" v-if="detected && !noData">
                比对结果：匹配度<span>{{resultRatio}}</span>
              </div>
              <div class="name_input" v-if="!detected">
                <el-form :model="nameForm" ref="nameForm">
                  <el-form-item label="姓名" prop="inputname"
                                :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
                    <el-input placeholder="输入姓名" v-model="nameForm.inputname">
                      <el-button slot="append" @click="submitForm('nameForm')"><i class="fa fa-check"></i></el-button>
                    </el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="feature_part">
              <h4>特征</h4>
              <el-scrollbar>
                <div class="feature_list">
                  <div class="feature_line">
                    <div class="feature_item">年龄：<span>{{feartureItem.age}}</span></div>
                    <div class="feature_item">性别：<span>{{feartureItem.genderMaleScore | genderFilter}}</span></div>
                  </div>
                  <div class="feature_line">
                    <div class="feature_item">张嘴：<span>{{feartureItem.mouthOpenScore | hasFilter}}</span></div>
                    <div class="feature_item">惊讶指数：<span>{{feartureItem.surprisedScore}}</span></div>
                  </div>
                  <div class="feature_line">
                    <div class="feature_item">困惑指数：<span>{{feartureItem.confusedScore}}</span></div>
                    <div class="feature_item">厌恶指数：<span>{{feartureItem.disgustScore}}</span></div>
                  </div>
                  <div class="feature_line">
                    <div class="feature_item">太阳镜：<span>{{feartureItem.sunGlassScore | hasFilter}}</span></div>
                    <div class="feature_item">魅力指数：<span>{{feartureItem.attrActive}}</span></div>
                  </div>
                  <div class="feature_line">
                    <div class="feature_item">化妆：<span>{{feartureItem.maskScore | hasFilter}}</span></div>
                    <div class="feature_item">人种：<span>{{feartureItem.race}}</span></div>
                  </div>
                  <div class="feature_line">
                    <div class="feature_item">镇静指数：<span>{{feartureItem.calmScore}}</span></div>
                    <div class="feature_item">快乐指数：<span>{{feartureItem.happyScore}}</span></div>
                  </div>
                  <div class="feature_line">
                    <div class="feature_item">生气指数：<span>{{feartureItem.angryScore}}</span></div>
                    <div class="feature_item">睁眼：<span>{{feartureItem.eyeOpenScore | hasFilter}}</span></div>
                  </div>
                  <div class="feature_line">
                    <div class="feature_item">恐惧指数：<span>{{feartureItem.scaredScore}}</span></div>
                    <div class="feature_item">眯眼：<span>{{feartureItem.squintScore | hasFilter}}</span></div>
                  </div>
                  <div class="feature_line">
                    <div class="feature_item">微笑指数：<span>{{feartureItem.smileScore}}</span></div>
                    <div class="feature_item">胡须：<span>{{feartureItem.beardScore | hasFilter}}</span></div>
                  </div>
                  <div class="feature_line">
                    <div class="feature_item">伤心指数：<span>{{feartureItem.sadScore}}</span></div>
                    <div class="feature_item">眼镜：<span>{{feartureItem.eyeGlassScore | hasFilter}}</span></div>
                  </div>
                  <div class="feature_line">
                    <div class="feature_item">惊叫指数：<span>{{feartureItem.screamScore}}</span></div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
            <div class="hideloading" v-if="showLoading">
              <div id="preloader_1">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <p v-if="loadingModal">加载中...</p>
                <p v-if="!loadingModal">上传中...</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        titlepng: require('@/assets/img/title-bg.png'),
        nonepng: require('../assets/img/none.png'),
        date: '',
        uploadPic: '',
        comparePic: '',
        facelist: [],
        orglist: [],
        nameForm: {
          inputname: ''
        },
        detected: Boolean,
        interval: '',
        timeinterval: '',
        rowIndex: '',
        itemIndex: '',
        feartureItem: {},
        resultRatio: '',
        noData: true,
        logId: 0,
        showLoading: false,
        loadingModal: true

      }
    },
    filters: {
      genderFilter: function (val) {
        let gender = typeof (val) === 'undefined' ? '' : val >= 50 ? '男' : '女'
        return gender
      },
      hasFilter: function (val) {
        let hasOrnot = typeof (val) === 'undefined' ? '' : val >= 50 ? '有' : '无'
        return hasOrnot
      },
      formatTime: function (val) {
        var date = new Date(val)
        var hours = date.getHours()
        var minutes = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
        var seconds = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
        return hours + ':' + minutes + ':' + seconds
      }
    },
    methods: {
      forMore: function (index) {
        this.rowIndex = index.index
        this.itemIndex = index.index2
        this.showLoading = true
        this.loadingModal = true
        var getData = this.facelist[index.index][index.index2]
        this.logId = getData.id
        this.axios.get(this.FSA + '/face/getFaceInfo', {
          params: {
            fullFileName: this.facelist[index.index][index.index2].uploadImgName.split('?fileId=')[1]
          }
        }).then(res => {
          this.feartureItem = res.data.data.faceAttrStr[0]
          if (getData.similarity === 0 || getData.similarity < 0.8) {
            this.detected = false
            this.uploadPic = getData.uploadImgName
          } else {
            this.detected = true
            this.resultRatio = (getData.similarity * 100).toFixed(2) + ' %'
            this.uploadPic = getData.uploadImgName
            this.comparePic = getData.faceLibrary.fileName
          }
          this.showLoading = false
        }).catch(function (error) {
          console.log(error)
        })
      },
      submitForm: function (formName) {
        var vm = this
        vm.$refs[formName].validate((valid) => {
          if (valid) {
            this.showLoading = true
            this.loadingModal = false
            var params = new URLSearchParams()
            params.append('logId', vm.logId)
            params.append('uploadFileName', vm.uploadPic.split('?fileId=')[1])
            params.append('manName', vm.nameForm.inputname)
            vm.axios({
              method: 'post',
              url: vm.FSA + '/facelibrary/insert',
              data: params
            }).then(function (response) {
              console.log(response)
              vm.$message({
                message: '上传成功',
                type: 'success'
              })
              vm.nameForm.inputname = ''
              vm.axios.get(vm.FSA + '/facelog/getTodayLogs').then(function (res) {
                var listdata = res.data.data
                vm.getList(listdata, 0)
                vm.handleInterval()
              }).catch(function (error) {
                console.log(error)
              })
              this.showLoading = false
            }).catch(function (error) {
              console.log(error)
              vm.$message.error('上传失败')
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getList: function (listdata, isLatest) {
        var vm = this
        if (listdata.length > 0) {
          vm.orglist = listdata
          vm.noData = false
          var list = []
          var listItem = []
          var firstTime = listdata[listdata.length - 1].uploadTime
          for (var idx = listdata.length - 1; idx >= 0; idx--) {
            listdata[idx].uploadImgName = vm.FSA + '/file/downloadUploadImg?fileId=' + listdata[idx].uploadImgName
            if (listdata[idx].faceLibrary) {
              listdata[idx].faceLibrary.fileName = listdata[idx].faceLibrary.fileName ? vm.FSA + '/file/downloadImg?fileId=' + listdata[idx].faceLibrary.fileName : ''
            }
//            listdata[idx].faceLibrary.fileName = listdata[idx].faceLibrary.fileName ? vm.FSA + '/file/downloadImg?fileId=' + listdata[idx].faceLibrary.fileName : ''
            if (listdata[idx].uploadTime >= firstTime - 10000) {
              listItem.push(listdata[idx])
            } else {
              list.push(listItem)
              listItem = []
              firstTime = listdata[idx].uploadTime
              listItem.push(listdata[idx])
            }
          }
          list.push(listItem)
          if (isLatest === 0) {
            vm.facelist = list
          } else {
            vm.facelist = list.concat(vm.facelist)
          }
          console.log(vm.facelist)
          var getData = vm.facelist[0][0]
          vm.uploadPic = getData.uploadImgName
          vm.logId = getData.id
          if (getData.similarity === 0 || getData.similarity < 0.8) {
            vm.detected = false
          } else {
            vm.detected = true
            vm.resultRatio = (getData.similarity * 100).toFixed(2) + ' %'
//            vm.uploadPic = getData.uploadImgName
            vm.comparePic = getData.faceLibrary.fileName
          }
          vm.axios.get(vm.FSA + '/face/getFaceInfo', {
            params: {
              fullFileName: vm.facelist[0][0].uploadImgName.split('?fileId=')[1]
            }
          }).then(function (res) {
            vm.feartureItem = res.data.data.faceAttrStr[0]
          }).catch(function (error) {
            console.log(error)
          })
        }
      },
      handletimeInterval() {
        clearInterval(this.timeinterval)
        this.timeinterval = setInterval(() => {
          this.setTime()
        }, 2000)
      },
      setTime() {
        let time = new Date()
        this.date = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate()
//        this.time = time.getHours() + ':' + time.getMinutes()
      },
      handleInterval() {
        var vm = this
        clearInterval(vm.interval)
        vm.interval = setInterval(() => {
          vm.getlatestData()
        }, 1000)
      },
      getlatestData() {
        var vm = this
        var latestId = vm.orglist[vm.orglist.length - 1].id
        vm.axios.get(vm.FSA + '/facelog/getLatestLogs', {
          params: {
            latestId: latestId
          }
        }).then(function (response) {
          var listdata = response.data.data
          vm.getList(listdata, 1)
        }).catch(function (error) {
          console.log(error)
        })
      }
    },
    mounted() {
      var vm = this
      vm.handletimeInterval()
      vm.axios.get(vm.FSA + '/facelog/getTodayLogs').then(function (response) {
        var listdata = response.data.data
        vm.getList(listdata, 0)
        vm.handleInterval()
      }).catch(function (error) {
        console.log(error)
      })
      /* if (!vm.noData) {
        this.interval = setInterval(() => {
          var vm = this
          var latestId = this.orglist[this.orglist.length].id
          vm.axios.get(this.FSA + '/facelog/getLatestLogs', {
            params: {
              latestId: latestId
            }
          }).then(function (response) {
            var listdata = response.data.data
            vm.getList(listdata, 1)
          }).catch(function (error) {
            console.log(error)
          })
        }, 10000)
      } */
    }
  }
</script>
